<template>
  <el-menu 
    :default-active="route.path" 
    class="el-menu-vertical-demo" 
    :collapse="store.isCollpse" 
    :unique-opened="true" 
    :router="true"  
    active-text-color="#6383ff" 
    background-color="#ffffff" 
    text-color="#666666" 
    @select="changeBrand()">
    <el-menu-item index="/">
      <el-icon><icon-menu /></el-icon>
      <!-- <svg-icon icon-class="table"></svg-icon> -->
      <template #title>首页</template>
    </el-menu-item>
    <el-menu-item index="/profile">
      <el-icon><UserFilled /></el-icon>
      <template #title>个人中心</template>
    </el-menu-item>
    <el-menu-item index="/usermanage">
      <el-icon><List /></el-icon>
      <template #title>用户管理</template>
    </el-menu-item>
    <el-menu-item index="/dating">
      <el-icon><Briefcase /></el-icon>
      <template #title>动态管理</template>
    </el-menu-item>
    <el-menu-item index="/activity">
      <el-icon><HelpFilled /></el-icon>
      <template #title>评论管理</template>
    </el-menu-item>
    <el-menu-item index="/labelManage">
      <el-icon><Management /></el-icon>
      <template #title>标签管理</template>
    </el-menu-item>
    <el-menu-item index="/chatManage">
      <el-icon><Comment /></el-icon>
      <template #title>聊天记录管理</template>
    </el-menu-item>
    <div class="icon-area">
    <el-icon v-show="!store.isCollpse" size="25" color="#fff" @click="changeCollpse()"><ArrowLeftBold /></el-icon>
    <el-icon v-show="store.isCollpse" size="25" color="#fff" @click="changeCollpse()"><ArrowRightBold /></el-icon>
  </div>
  </el-menu>
</template>

<script setup lang="ts">
import { Menu as IconMenu,UserFilled,List,Briefcase,HelpFilled,ArrowLeftBold,ArrowRightBold,Comment,Management} from '@element-plus/icons-vue'
import useGlobalStore from '@/store/modules/global'
import { useRouter,useRoute } from 'vue-router';
import { ref } from 'vue';


const store = useGlobalStore()

const changeCollpse = ()=>{
  store.changeCollpse()
}
const router = useRouter()
const route = useRoute()
//改变面包屑title
const changeBrand = ()=>{
  
  const title = ref<string>(router.currentRoute.value.meta.title)
  
  store.changeTitle(title.value)
}

</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
  position: relative;
}
.icon-area{
  position: absolute;
  top: 0;
  right: -26px;
  z-index: 9;
  background-color:#545c64;
}
</style>
